<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* header>div:only-child{background: greenyellow;} */
			header>div:only-of-type{background: darkorange;}
			:root{
				height: 300px;
			}
			html{}
			footer:empty{
				width: 500px;
				height: 300px;
				background: lightyellow;
			}
		</style>
	</head>
	<body>
		<header>
			<div>div1</div>
			<h2>h2</h2>
			<p>pppp</p>
			<!-- <div>div2</div> -->
		</header>
		<footer></footer>
	</body>
</html>
<!-- 
结构伪类选择符 
	E>F:only-child{属性: 属性值;属性: 属性值;属性: 属性值;}
		匹配父元素E中只具有一个子元素，且为需要匹配的F元素时才会选中执行样式
	E>F:only-of-type{属性: 属性值;属性: 属性值;属性: 属性值;}
		匹配父元素E中只具有一个需要匹配的F元素时才会选中执行样式
		对于子元素的总数量没有限定，但是限定了需要匹配的子元素的数量只能有一个
		
	:root{属性: 属性值;属性: 属性值;属性: 属性值;}
		匹配到根元素(html)为其添加样式
	
	E:empty{属性: 属性值;属性: 属性值;}
		匹配E元素为空(元素中没有内控)时为其添加样式
		只要E元素中不为空(有内容)样式就不会执行
-->